<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1638 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M109.336-2.712H1530.04q101.48 0 101.48 101.48v811.83q0 101.48-101.48 101.48H109.336q-101.479 0-101.479-101.48V98.768q0-101.48 101.479-101.48Z"/><path fill="#F79E1B" d="M718.209 428.574a279.067 279.067 0 1 0 558.134 0 279.067 279.067 0 1 0-558.134 0Z"/><path fill="#EB001B" d="M363.033 428.574a279.067 279.067 0 1 0 558.134 0 279.067 279.067 0 1 0-558.134 0Z"/><path fill="#FF5F00" d="M718.21 428.574a278.56 278.56 0 0 1 101.478-215.288 278.56 278.56 0 0 1 101.48 215.288 278.407 278.407 0 0 1-101.48 215.236A278.407 278.407 0 0 1 718.21 428.574z"/><path fill="#FFF" d="M531.742 857.322v-48.203a28.262 28.262 0 0 0-29.175-30.443 28.668 28.668 0 0 0-26.639 13.953 27.805 27.805 0 0 0-25.37-13.953 26.943 26.943 0 0 0-22.832 11.416v-8.88h-15.222v76.11h15.222v-43.129a18.368 18.368 0 0 1 19.027-20.295c11.417 0 16.49 7.61 16.49 20.295v43.129h15.222v-43.129a18.368 18.368 0 0 1 19.028-20.295c11.416 0 17.758 7.61 17.758 20.295v43.129zm246.086-76.11h-27.907V758.38H734.7v22.833h-16.49v13.953h16.49v35.518c0 17.759 6.342 27.906 25.37 27.906a35.112 35.112 0 0 0 20.295-6.342l-5.074-13.953a33.082 33.082 0 0 1-13.953 3.805c-7.611 0-11.417-5.074-11.417-12.685v-35.517h27.907zm140.802-1.268a21.514 21.514 0 0 0-20.296 11.417v-8.88h-15.222v76.11h15.222v-43.13c0-12.684 6.343-20.295 16.49-20.295a15.222 15.222 0 0 1 10.149 2.537l5.073-13.953a15.222 15.222 0 0 0-11.416-3.806zm-213.106 7.611a57.082 57.082 0 0 0-30.443-7.61c-19.028 0-30.444 8.879-30.444 24.1 0 12.685 8.88 20.296 25.37 21.565l7.61 1.268c8.88 1.269 13.954 3.806 13.954 8.88 0 6.342-6.342 10.148-17.759 10.148a46.274 46.274 0 0 1-25.37-7.611l-7.61 11.416a61.445 61.445 0 0 0 32.98 10.148c21.565 0 34.25-10.148 34.25-24.101 0-12.685-8.88-20.296-25.37-22.833l-7.611-1.269c-7.611-1.268-13.954-2.537-13.954-7.61s6.343-8.88 15.222-8.88a55.103 55.103 0 0 1 24.101 6.343zm229.596 31.712a37.293 37.293 0 0 0 39.323 39.323 37.7 37.7 0 0 0 26.639-8.879l-7.611-11.416a38.308 38.308 0 0 1-20.296 6.342 25.37 25.37 0 0 1 0-50.74 38.359 38.359 0 0 1 20.296 6.343l7.61-11.416a37.7 37.7 0 0 0-26.638-8.88 37.293 37.293 0 0 0-39.323 39.323zm-106.552-39.323a36.685 36.685 0 0 0-36.787 39.323 36.33 36.33 0 0 0 38.055 39.323 44.296 44.296 0 0 0 30.444-10.147l-7.611-11.417a34.452 34.452 0 0 1-21.564 7.611 21.97 21.97 0 0 1-22.833-19.027h57.082v-6.343a36.685 36.685 0 0 0-36.786-39.323zm0 13.954a19.738 19.738 0 0 1 20.295 19.027h-40.591a19.738 19.738 0 0 1 20.296-19.027zm-204.227 25.37v-38.055H609.12v8.88a31.408 31.408 0 0 0-24.1-11.417 36.685 36.685 0 0 0-36.787 39.323 37.446 37.446 0 0 0 36.786 39.323 27.856 27.856 0 0 0 24.101-11.416v8.879h15.222zm-62.156 0a23.645 23.645 0 0 1 24.102-25.37 23.39 23.39 0 0 1 22.832 25.37 22.731 22.731 0 0 1-22.832 25.37 24.406 24.406 0 0 1-24.102-25.37zm584.773-39.324a21.514 21.514 0 0 0-20.296 11.417v-8.88h-15.222v76.11h15.222v-43.13c0-12.684 6.342-20.295 16.49-20.295a15.222 15.222 0 0 1 10.148 2.537l5.074-13.953a15.222 15.222 0 0 0-11.416-3.806zm121.774 65.962h2.537c1.269 0 1.269 1.268 2.537 1.268 1.269 1.269 1.269 1.269 1.269 2.537v5.074c0 1.268-1.269 1.268-1.269 2.537-1.268 1.268-1.268 1.268-2.537 1.268h-5.074c-1.268 0-1.268-1.268-2.537-1.268-1.268-1.269-1.268-1.269-1.268-2.537v-5.074c0-1.268 1.268-1.268 1.268-2.537 1.269-1.268 1.269-1.268 2.537-1.268zm0 13.953h2.537a1.218 1.218 0 0 0 1.269-1.269l1.268-1.268v-5.074a1.218 1.218 0 0 0-1.268-1.268l-1.269-1.269h-5.074a1.218 1.218 0 0 0-1.268 1.269l-1.269 1.268v5.074a1.218 1.218 0 0 0 1.269 1.268l1.268 1.269zm0-10.148h2.537l1.269 1.269v1.268a1.218 1.218 0 0 0-1.269 1.268l2.537 2.537h-1.268l-2.537-2.537h-1.269v2.537h-1.268v-7.61h1.268zm-1.268 1.269 2.537 1.268v-2.537l-2.537 1.269zm-178.857-31.713v-38.054h-15.222v8.88a31.408 31.408 0 0 0-24.1-11.417 36.685 36.685 0 0 0-36.787 39.323 37.446 37.446 0 0 0 36.786 39.323 27.856 27.856 0 0 0 24.101-11.416v8.879h15.222zm-60.887 0a23.645 23.645 0 0 1 24.101-25.37 23.39 23.39 0 0 1 22.833 25.37 22.731 22.731 0 0 1-22.833 25.37 23.645 23.645 0 0 1-24.101-25.37zm213.106 0V750.77h-15.222v39.323a31.408 31.408 0 0 0-24.101-11.416A36.685 36.685 0 0 0 1164.716 818a37.446 37.446 0 0 0 36.787 39.323 27.856 27.856 0 0 0 24.1-11.416v8.879h15.223zm-60.888 0a23.645 23.645 0 0 1 24.101-25.37 23.39 23.39 0 0 1 22.833 25.37 22.731 22.731 0 0 1-22.833 25.37 23.645 23.645 0 0 1-24.1-25.37z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconMastercard extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
